
	<head>
		<link rel="stylesheet" href="/Public/asset/css/colorbox.css" />
		<link rel="stylesheet" href="/Public/asset/css/ace.min.css" />
	</head>
	<body>
		<div class="ace-thumbnails">
				<a href="assets/images/gallery/image-1.jpg" title="Photo Title" data-rel="colorbox">
					<img alt="150x150" src="assets/images/gallery/thumb-1.jpg" />
				</a>
		</div>
		<script src="/Public/asset/js/jquery.min-2.0.3.js"></script>
		<script src="/Public/asset/js/bootstrap.min1.js"></script>
		<script src="/Public/asset/js/jquery.colorbox-min.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
				var colorbox_params = {
					reposition:true,
					scalePhotos:true,
					scrolling:false,
					previous:'<i class="icon-arrow-left"></i>',
					next:'<i class="icon-arrow-right"></i>',
					close:'&times;',
					current:'{current} of {total}',
					maxWidth:'100%',
					maxHeight:'100%',
					onOpen:function(){
						document.body.style.overflow = 'hidden';
					},
					onClosed:function(){
						document.body.style.overflow = 'auto';
					},
					onComplete:function(){
						$.colorbox.resize();
					}
				};

				$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
				$("#cboxLoadingGraphic").append("<i class='icon-spinner orange'></i>");//let's add a custom loading icon

				/**$(window).on('resize.colorbox', function() {
					try {
						//this function has been changed in recent versions of colorbox, so it won't work
						$.fn.colorbox.load();//to redraw the current frame
					} catch(e){}
				});*/
			})
		</script>
	</body>